<template>
  <div class="employees-container">
    <div class="app-container">
      <PageTools :showBefore="true">
        <template slot="before">
          <el-button size="medium" type="primary">新建</el-button>
          <el-button size="medium">批量操作</el-button>
          <el-button size="medium">导入</el-button>
          <el-button size="medium">导出</el-button>
        </template>
        <!-- 功能按钮 -->
        <template slot="after">
          <el-input
            placeholder="请输入内容"
            v-model="inputSearch"
            clearable
            size="medium"
          >
          </el-input>
          <el-button type="primary" size="small" @click="searchBtn"
            >主要按钮</el-button
          >
        </template>
      </PageTools>
      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <el-table  :data="list">
          <el-table-column type="selection" width="55" />
          <!-- <el-table-column label="员工ID" sortable="" prop="username" /> -->
          <el-table-column label="员工ID"  prop="username" />
          <el-table-column label="部门名称"  prop="workNumber" />
          <el-table-column label="姓名"  prop="formOfEmployment" />
          <el-table-column label="所属角色"  prop="departmentName" />
          <el-table-column label="启用"  prop="timeOfEntry">
            <template>
              <el-switch v-model="value"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="时间" sortable="" prop="enableState" />
          <el-table-column label="操作"  fixed="right" width="280">
            <template>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import PageTools from "@/components/PageTools";
// import { getEmployeeList } from '@/api/employees'
export default {
  components: {
    PageTools,
    // getEmployeeList
  },
  data() {
    return {
      list: [],
      loading: false, //转圈状态
      page: {
        page: 1, //当前的 页码
        size: 5, //每条的个数
        total: 0, //总数
      },
      inputSearch: "", //input
    };
  },
  created() {
    // 拉取信息
    // this.getEmployeeList()
  },
  methods: {
    changePage(newPage) {
      //当前页 发生改变时触发
      this.loading = true;
      console.log(newPage);
      this.page.page = newPage; //创建一个新的页码去请求数据
      this.getEmployeeList();
    },
    async getEmployeeList() {
      this.loading = true;
      try {
        const { rows, total } = await getEmployeeList(this.page);
        this.list = rows;
        this.page.total = total;
      } catch (error) {
        console.log(error);
      }
      this.loading = false;
    },
    searchBtn(){
      
    }
  },
};
</script>

<style lang='scss' scoped>
.el-input--medium {
  width: 200px;
  margin-right: 10px;
}
</style>
